<template>
  <div class="home">
    <el-progress style="position:fixed; top: 0;width: 100%;" v-if="requestPercent > 0 && requestPercent < 100" :percentage="requestPercent" status="success"></el-progress>
    <Siderbar/>
    <div id="app-main" :class="!SiderbarCollapse ? 'full-width' : 'short-width'">
      <Topbar />
      <router-view/>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Siderbar from '@/admin/components/Sidebar/Index'
import Topbar from '@/admin/components/Topbar/Index'
import {mapGetters} from 'vuex'
import Cookies from 'js-cookie';
import requestConfig from '@/api/config'
export default {
  name: 'Home',
  components: {
    Siderbar,
    Topbar
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters('setting', {
      SiderbarCollapse: 'sidebarCollapse',
      requestPercent: 'requestPercent'
    })
  },
  mounted() {
    console.log('cookie:', Cookies.get('USER_NAME'))
    if (Cookies.get('USER_NAME') == '' || Cookies.get('USER_NAME') == undefined) {
      location.href = requestConfig[process.env.NODE_ENV].adminLoginPage
    }
    if (Cookies.get('USER_TYPE') == 'T') {
      location.href = requestConfig[process.env.NODE_ENV].adminLoginPage
    }
    if (Cookies.get('USER_TYPE') == 'S') {
      location.href = requestConfig[process.env.NODE_ENV].adminLoginPage
    }
  },
  methods: {
  }
}
</script>

<style scoped>
  .home{
    width: 100%;
    height: 100%;
  }
  #app-main{
    height: 100vh;
    overflow: scroll;
    float: right;
    transition: width 0.5s;
  }
  .full-width{
    width: calc(100vw - 230px);
  }
  .short-width{
    width: calc(100vw - 80px);
  }
</style>